<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 转换 - 平面位移</title>
  <style>
    body {
      padding: 0 40px 40px;
    }

    .box {
      width: 800px;
      height: 400px;
      border-top: 1px solid transparent;
      background-color: pink;
    }

    .inner {
      width: 200px;
      height: 200px;
      background-color: red;
      
      /* 随意改变盒子位置，观察位移变化 */
      margin-left: 200px;
      margin-top: 100px;
      
      /* 设置过渡效，便于观察位置的变化 */
      transition: transform 1s;
    }

    .box:hover .inner {
      /* transform 用来设置标签盒子的转换 */
      /* translate 表示进行位移转换 */
      /* 表过盒子相对于【原来的位置】向右移动 100px 向下移动 120px */
      /* transform: translate(100px, 120px); */
      
      /* x 为负值时，向左移动，y 为负值时，向上移动 */
      /* transform: translate(-100px, -100px); */
      
      /* 支持百分比，分别参照自身的宽和高 */
      transform: translate(50%, 20%);

      /* 可以省略 y 值，表示只在水平移动 */
      /* transform: translate(10px); */
    }


    .cube {
      width: 400px;
      height: 200px;
      border: 1px solid #ccc;
      position: relative;
    }
    .cell {
      width: 200px;
      height: 100px;
      /* 配合定位实际元素居中 */
      background-color: pink;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <h3>平面位移</h3>
  <p>位置移动简称位移，平面位移是指元素沿着x轴（水平）、y轴（垂直）方向发生的位置移动。</p>

  <h4>基本用法</h4>
  <div class="box">
    <div class="inner"></div>
  </div>

  <h4>元素居中</h4>
  <div class="cube">
    <div class="cell"></div>
  </div>
</body>
</html>